<style>
    .show{display: inherit}
    .hide{display: none}
    table tr td,table tr th{width: 5%}
    .layui-btn{margin-right: 10px}
    .layui-table-cell {overflow-x: hidden; }
	.layui-form-pane .layui-form-label{width:auto;}
	.layui-form-item{margin-bottom: 0px;}
</style>

<table id="selectDataTable" lay-filter="demoEvent"></table>
<div style="margin-top:8px;"><strong>增加需要合并的物料</strong></div>
<hr />
<form class="layui-form layui-form-pane fixed-bar-form" action="{:url()}" method="get" id="hisi-table-search">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">材料名称</label>
            <div class="layui-input-inline">
                <input type="text" name="material_name" lay-verify="" placeholder="输入材料名称" class="layui-input">
            </div>
        </div>
        
        <div class="layui-inline">
            <label class="layui-form-label">物料SKU</label>
            <div class="layui-input-inline">
                <input type="text" name="material_sku" lay-verify="" placeholder="输入材料SKU" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">内部sku</label>
            <div class="layui-input-inline">
                <input type="text" name="self_sku" lay-verify="" placeholder="输入内部SKU" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
        </div>
    </div>
    <input name="action" type="hidden" value="datalist" />
</form>
<table id="dataTable" lay-filter="demoEvent"></table>


<div class="pop-bottom-bar">
	<input name="merge_materials" id="merge_materials" type="hidden" value="{:$mids}" />
    <input name="set_self_sku" id="set_self_sku" type="hidden" value="" />
	<button type="submit" class="layui-btn"  btn_name="edit_one" lay-submit="" action_state='createcode' lay-filter="demo1">生成统一内部sku</button>
	&nbsp;<button type="submit" class="layui-btn layui-bg-orange"  btn_name="edit_one" lay-submit="" action_state='save' lay-filter="demo1">确认提交合并</button>&nbsp;
	<a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
</div>
{include file="system@block/layui" /}

<script type="text/html" title="操作按钮模板" id="buttonTpl">
    <a href="javascript:void(0);" onclick="chooseMaterial(this,{{d.id}})" class=" layui-btn layui-btn-xs layui-btn-danger">选择</a>
	{{# if(d.self_sku){ }}
	<a href="javascript:void(0);"  onclick="chooseMaterial(this,{{d.id}},'{{d.self_sku}}')" class=" layui-btn layui-btn-xs layui-btn-danger ">选择并使用此sku</a>
	{{# } }}
</script>

<script type="text/html" id="picTpl">
    <span class="lay-pic-container" src="{{ d.pic }}">
		<img src="{{ d.ori_pic }}" class="lay-pic">

	</span>
</script>
<script type="text/html" id="nameTpl">
    {{layui.tool.formatMaterialType(d.type,'',2)}}<span class='copy-item'>{{d.name}}</span>
</script>
<script src="__PUBLIC_JS__/jquery.2.1.4.min.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/xm-select/dist/xm-select.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/vue@3.2.26/dist/vue.global.js"></script>
<script type="text/javascript">

    layui.use(['table', 'laydate', 'form', 'laytpl','tool','layer'], function() {
        var $ = layui.jquery;
        var table = layui.table;
        var laydate = layui.laydate;
        var form = layui.form;
        var layer = layui.layer;
        var initialize=0,second_initialize=0,first_init=0,changetab=0;

        table.render({
            elem: '#selectDataTable'
            ,url: '{:url("",['mids'=>$mids,'action'=>'datalist'])}' //数据接口
            ,page: false //开启分页
            //,skin: 'row'
            ,even: true
            ,limit: 100
            ,limits: [100,150,200]
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar:false
            ,defaultToolbar: ['exports', 'print']
            ,cols: [[ //表头
                {field: 'material_name', title: '材料名称',templet:'#nameTpl'}
                ,{field: 'model', title: '型号'}
                ,{field: 'color', title: '颜色',width:100}
                ,{field: 'material_sku', title: '物料sku'}
                ,{field: 'self_sku', title: '内部sku',width:150,templet:function(d){
					return "<input type='hidden' name='ids[]' value='"+d.id+"'><input type='text' class='layui-input self_skus' name='self_skus[]' value='"+d.self_sku+"'>";}
				}
                ,{field: 'unit', title: '单位',width:70}
                ,{field: 'ft_name', title: '操作',templet:function(d){
					return d.self_sku!='' ? '<a href="javascript:void(0);"  onclick="chooseMaterial(this,'+d.id+',\''+d.self_sku+'\')" class=" layui-btn layui-btn-xs layui-btn-danger ">使用此内部sku</a>' : '';
				}}
                // ,{field: 'col3', title: '操作',templet:'#buttonTpl',width:100}
            ]]
        });
		
		table.render({
            elem: '#dataTable'
            ,url: '{:url("",['action'=>'datalist'])}' //数据接口
            ,page: true //开启分页
            //,skin: 'row'
            ,even: true
            ,limit: 10
            ,limits: [10,20,50]
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar:false
            ,defaultToolbar: ['exports', 'print']
            ,cols: [[ //表头
                {field: 'material_name', title: '材料名称',templet:'#nameTpl'}
                ,{field: 'model', title: '型号'}
                ,{field: 'color', title: '颜色',width:100}
                ,{field: 'material_sku', title: '物料sku'}
                ,{field: 'self_sku', title: '内部sku',width:150,templet:function(d){
					return "<input type='hidden' name='ids[]' value='"+d.id+"'><input type='text' class='layui-input self_skus' name='self_skus[]' value='"+d.self_sku+"'>";}
				}
                ,{field: 'unit', title: '单位',width:70}
                ,{field: 'col3', title: '操作',templet:'#buttonTpl'}
            ]]
        });
		
		// 获取某些物料的各厂数据
		window.chooseMaterial = function(clickLabel,material_id=0,self_sku='') {
			//var selecttr=$(clickLabel).parent().parent().parent();
			$("#merge_materials").val($("#merge_materials").val()+material_id+",");
			$(".layui-table tbody").eq(0).append($(clickLabel).parent().parent().parent());
			if(self_sku!=''){
				$(".layui-table tbody").eq(0).find(".self_skus").each(function(){
					$(this).val(self_sku);	
				})
				$("#set_self_sku").val(self_sku);
			}
			console.log(111);
		}

		form.on('submit(demo1)', function (data) {
			var uploadtoJinp=$(this).attr("action_state");
			if(uploadtoJinp=='createcode'){
				$.ajax({
					type: "POST",
					url: "{:url('')}?action=getSelfSkuCode",
					data: "materialid=1",
					dataType:"json",
					success: function(res){
						$("#set_self_sku").val(res.code);
						//$(".self_skus").val(res.code);
						$(".layui-table tbody").eq(0).find(".self_skus").each(function(){
							$(this).val(res.code);	
						})
						//res.code
					}
				});
			}else if(uploadtoJinp=='save'){
				$.ajax({
					type: "POST",
					url: "{:url('')}?action=dosave",
					data: "material_ids="+$("#merge_materials").val()+"&self_sku="+$(".self_skus").val(),
					dataType:"json",
					success: function(res){
						if (res.code == 1) {
							layer.msg(res.msg, {icon: 1});
							setTimeout("parent.layui.layer.closeAll()",1000);
						} else {
							layer.msg(res.msg, {icon: 2,anim: 6});
						}
					}
				});
			}
		});
    });

</script>